<template>
  <BaseDialog :title="title" :show="show" @maskClick="maskClick">
    <div class="shop-body">
      <div class="context-body">
        &nbsp;&nbsp;&nbsp;小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒 馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒馆小酒
      </div>
      <div class="buttons">
        <div class="button" @click="wayiwa">挖一挖</div>
        <div class="line"></div>
        <div class="button after" @click="gothere">前往这里</div>
      </div>
    </div>
  </BaseDialog>
</template>
<script>
import BaseDialog from '../components/BaseDialog'
import utils from '../assets/js/utils.js'
// 店铺弹框
export default {
  components: {
    BaseDialog
  },
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      title: '今样小酒馆'
    }
  },
  computed: {
    show() {
      return this.id != null
    }
  },
  methods: {
    maskClick() {
      // 遮罩点击
      this.$emit('maskClick')
    },
    // 挖一挖
    wayiwa() {
      alert('挖一挖')
    },
    // 去那里
    gothere() {
      // alert('去那里')
      utils.navigateTo({
        url:'../info/info?id=1'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.shop-body {
  width: 90%;
  margin: 0 auto;
  .context-body {
    width: 100%;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    max-height: 50px;
    overflow: auto;
  }
  .buttons {
    width: 150px;
    height: 30px;
    background: linear-gradient(to right, #ca596e, #ffc6cd);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 30px;
    float: right;
    .line {
      width: 1px;
      height: 50%;
      background-color: #fff;
      margin-left: 10px;
      margin-right: 10px;
    }
    .button {
      // width: 40%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #fff;
      font-size: 12px;
      &.after {
        justify-content: flex-end;
      }
    }
  }
}
</style>

